/* eslint-disable */
<template>
  <div>
    <div class="header">
      <router-link to="/house">
        <i class="fa fa-map-marker" @click="fn1"></i>
      </router-link>
      <router-link to="/house">
        <i class="fa fa-angle-down" @click="fn1"></i>
      </router-link>
      <i class="fa fa-commenting-o"></i>
      <router-link to="/search">
        <i class="fa fa-search" @click="fn2"></i>
      </router-link>
    </div>
    <div class="main">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item,key,index) in bannerImg" :key="index">
            <img :src="item.img" />
          </div>
        </div>
      </div>
      <div class="menuclass" v-html="menu"></div>
      <div class="limited">
        <div class="limited_top">
          <span class="limitedTitle">限时抢购</span>
          <span class="limitedMore">
            <em>更多</em>
            <i class="fa fa-angle-right"></i>
          </span>
        </div>
        <div class="limited_main">
          <ul v-for="(item,key,index) in limitedmain" :key="index">
            <li>
              <img :src="'/shengxian'+'static/'+item.image" />
              <br />
              <span>{{item.title}}</span>
              <span class="limitprice">￥{{item.market_price}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="mainlike">
        <section class="goods-list-title">
          <span class="goods_title">猜你喜欢</span>
          <span class="goods_en">EXPLORE</span>
        </section>
        <div class="goodswrapper">
          <div class="goodsMain">
            <ul v-for="(item,key,index) in goodsmain" :key="index">
              <li>
                <img :src="item.image" />
                <div class="goodsright">
                  <p class="itemname">{{item.title}}</p>
                  <p class="itembuy">
                    <span>规格:{{item.specifications}}</span>
                    <span class="itemmouth">月销:{{item.soldnum}}</span>
                  </p>
                  <p class="itemprice">
                    <span>￥{{item.market_price}}</span>
                    <i class="fa fa-shopping-cart"></i>
                  </p>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="wra_bottom">{{str}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import { mapMutations } from "vuex";
import axios from "axios";
import BScroll from "better-scroll";
export default {
  data() {
    return {
      bannerImg: "",
      menu: "",
      limitedmain: "",
      goodsmain: "",
      str: "",
      num: 1,
      scroll: ""
    };
  },
  name: "Slider",
  methods: {
    ...mapMutations(["fn1", "fn2"]),
    request() {
      axios
        .get("/shengxian/m/molie/wm_banner.php?rnd=0.682090067559049")
        .then(data => {
          //   console.log(data.data.banners)
          this.bannerImg = data.data.banners;
        });
      axios
        .get("shengxian/m/molie/wm_menu.php?rnd=0.5340723103359643")
        .then(data => {
          //   console.log(data.data)
          this.menu = data.data;
        });
      axios.get("shengxian/m/molie/limit.php").then(data => {
        // console.log(data.data);
        this.limitedmain = data.data;
      });
      axios.get("shengxian/m/molie/getwmlist.php?page=1").then(data => {
        // console.log(data.data.goods_list)
        this.goodsmain = data.data.goods_list;
      });
    },
    async loaddb() {
      console.log(this.num);
      this.num += 1;
      axios
        .get("shengxian/m/molie/getwmlist.php?page=" + this.num)
        .then(data => {
          this.goodsmain += data.data.goods_list;
        });
    }
  },
  created() {
    this.request();
  },
  //  activated(){
  //       if(this.scroll){
  //           setTimeout(()=>{
  //               this.scroll.scrollTo(0,localStorage.getItem('y'));
  //           },100)
  //       }
  //   },
  async mounted() {
    new Swiper(".swiper-container", {
      loop: true, // 循环模式选项
      autoplay: true //可选选项，自动滑动
    });
    setTimeout(() => {
      this.scroll = new BScroll(".goodswrapper", {
        tap: true,
        click: true,
        pullUpLoad: true
      });
      this.scroll.on(
        "pullingUp",
        async () => {
          this.str = "加载更多";
          await this.loaddb();
          setTimeout(() => {
            this.scroll.finishPullUp();
            this.str = "";
            this.scroll.refresh();
          }, 10);
        },
       10
      );
      // this.scroll.on("scroll", ({ y }) => {
      //   if (y !== 0) {
      //     // console.log(y)
      //     localStorage.setItem("y", y);
      //   }
      // });
    });
  }
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 1rem;
  border-bottom: 1px solid #f1f1f1;
  line-height: 1rem;
  padding: 0 5%;
  box-sizing: border-box;
  .fa-map-marker {
    color: green;
    margin-right: 3.5%;
  }
  .fa-angle-down {
    font-size: 0.4rem;
    color: gray;
  }
  .fa-search {
    float: right;
    margin-top: 0.3rem;
    color: gray;
  }
  .fa-commenting-o {
    float: right;
    margin-top: 0.3rem;
    color: gray;
    margin-left: 5.5%;
    margin-right: 2.5%;
  }
}
.swiper-container {
  width: 100%;
  height: 100%;
  .swiper-wrapper {
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      height: 9em;
      background: #fff;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.menuclass {
  text-align: center;
  font-size: 18px;
  height: 9em;
  background: #fff;
  a {
    display: inline-block;
    padding-top: 25px;
    font-size: 12px;
    color: #666666;
    width: 25%;
    line-height: 60px;
    text-align: center;
    height: 60px;
  }
}
.limited {
  width: 100%;
  overflow: hidden;
  background: #f8b037;
  padding-bottom: 4%;
  .limited_top {
    width: 100%;
    overflow: hidden;
    height: 50px;
    line-height: 50px;
    padding: 0 1.5em;
    box-sizing: border-box;
    color: #ffffff;
    .limitedTitle {
      font-weight: bold;
      font-size: 0.4rem;
      margin-right: 3.8rem;
    }
    .fa-angle-right {
      margin-left: 0.2rem;
    }
  }
  .limited_main {
    width: 90%;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 0.5em;
    background: #fff;
    ul {
      width: 100%;
      padding: 0 5%;
      box-sizing: border-box;
      li {
        width: 33.3%;
        float: left;
        box-sizing: border-box;
        padding-left: 3%;
        background: #fff;
        img {
          width: 100%;
          border-radius: 0.3rem;
        }
        .limitprice {
          font-size: 0.3rem;
          color: #fc3b04;
          float: right;
          width: 40%;
        }
      }
    }
  }
}
.mainlike {
  width: 100%;
  background: #fff;
}
.goods-list-title {
  border-bottom: 1px solid #eee;
  color: #666;
  padding: 0 1rem;
  margin: 0;
  text-align: left;
  height: 50px;
  line-height: 50px;
  border-top: none;
  .goods_title {
    font-size: 0.3rem;
    font-weight: bold;
    color: #000;
  }
  .goods_en {
    font-size: 0.3rem;
    color: #1bad42;
  }
}
.goodsMain {
  position: relative;
  width: 100%;
  overflow: hidden;
  .wra_bottom {
    position: absolute;
    bottom: 0;
  }
  ul {
    li {
      width: 100%;
      border-bottom: 1px solid #eee;
      padding: 2%;
      box-sizing: border-box;
      overflow: hidden;
      img {
        width: 33%;
        float: left;
        padding-right: 2%;
        box-sizing: border-box;
      }
      .goodsright {
        width: 67%;
        float: right;
        padding: 0 2%;
        box-sizing: border-box;
        .itemname {
          font-size: 0.36rem;
        }
        .itembuy {
          color: #646464;
          font-size: 0.28rem;
          margin: 5% 0;
          .itemmouth {
            float: right;
          }
        }
        .itemprice {
          font-size: 0.3rem;
          color: #f48336;
          .fa-shopping-cart {
            float: right;
          }
        }
      }
    }
  }
}
</style>

